<template>
  <div class='app-container'>
    <div class='app-box clear'>
      <div class='inputbox'>
        <div class="day-top clearfix">
          <div class="top">
            <span>出单时间：</span>
           	<el-date-picker
            class='wd230'
            size="mini"
            value-format='yyyy-MM-dd'
            v-model="time1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          	</el-date-picker>
          </div>
		  <div class="top1">
            <span>保险公司：</span>
            <el-select class="wid" size="mini" v-model="Insurance" placeholder="请选择保险公司" multiple collapse-tags>
              <el-option-group v-for="group in companies" :key="group.letter" :label="group.letter">
                <el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id">
                </el-option>
              </el-option-group>
            </el-select>
          </div>
		  <div class="top2">
            <span>工号：</span>
			<el-select v-model="staffAccount" class='wd130' size='mini'>
				<el-option v-for="item in sAccount" :key="item.id" :label="item.content
					" :value="item.id">
				</el-option>
			</el-select>
          </div>
          <div class="top1">
            <span>组织机构：</span>
            <!-- <ztree-select class="wd210" v-model="organizationUnitId" :treedata="treeData" :childprops="childprops" @change='setSelectedId'></ztree-select> -->
            <el-select v-model="organizationUnitId" placeholder="请选择" size="mini" class="wd150">
              <el-option v-for="item in treeData" :key="item.organizationId" :label="item.organizationName" :value="item.organizationId">
              </el-option>
            </el-select>
          </div>
		  <div class="top3">
		   <el-button size="mini" type="primary" v-on:click='search()' class='sbtn'>搜索</el-button>
		  </div>
        </div>
      </div>
      <!-- 列表 -->
	  <div class="tablebox newOld-table">
		   <el-table
			:data="tableData"
			style="width: 100%">
			<el-table-column
			prop="insuranceName"
			label="保险公司">
			</el-table-column>
			<el-table-column
			label="新/旧车">
			<template slot-scope="scope">
                <div class="row1">新车</div>
                <div class="row2">旧车</div>
                <div class="row3">合计</div>
            </template>
			</el-table-column>
			<el-table-column label="保费（万元）" align="center">
			<el-table-column
			align="right"
				label="总保费">
				<template slot-scope="scope">
					<div class="row1">{{scope.row.type1.a}}</div>
					<div class="row2">{{scope.row.type2.a}}</div>
					<div class="row3">{{scope.row.type3.a}}</div>
            	</template>
			</el-table-column>
			<el-table-column
			align="right"
				label="交强险保费">
				<template slot-scope="scope">
					<div class="row1">{{scope.row.type1.b}}</div>
					<div class="row2">{{scope.row.type2.b}}</div>
					<div class="row3">{{scope.row.type3.b}}</div>
            	</template>
			</el-table-column>
			<el-table-column
				align="right"
				label="交强险占比">
				<template slot-scope="scope">
					<div class="row1">{{scope.row.type1.c}}</div>
					<div class="row2">{{scope.row.type2.c}}</div>
					<div class="row3">{{scope.row.type3.c}}</div>
            	</template>
			</el-table-column>
			<el-table-column
				align="right"
				label="商业险保费">
				<template slot-scope="scope">
					<div class="row1">{{scope.row.type1.d}}</div>
					<div class="row2">{{scope.row.type2.d}}</div>
					<div class="row3">{{scope.row.type3.d}}</div>
            	</template>
			</el-table-column>
			<el-table-column
				align="right"
				label="商业险占比">
				<template slot-scope="scope">
					<div class="row1">{{scope.row.type1.e}}</div>
					<div class="row2">{{scope.row.type2.e}}</div>
					<div class="row3">{{scope.row.type3.e}}</div>
            	</template>
			</el-table-column>
			</el-table-column>
			<el-table-column label="保单量" align="center">
			<el-table-column
				align="right"
				label="总单量">
				<template slot-scope="scope">
					<div class="row1">{{scope.row.type1.a1}}</div>
					<div class="row2">{{scope.row.type2.a1}}</div>
					<div class="row3">{{scope.row.type3.a1}}</div>
            	</template>
			</el-table-column>
			<el-table-column
				align="right"
				label="交强险单量">
				<template slot-scope="scope">
					<div class="row1">{{scope.row.type1.b1}}</div>
					<div class="row2">{{scope.row.type2.b1}}</div>
					<div class="row3">{{scope.row.type3.b1}}</div>
            	</template>
			</el-table-column>
			<el-table-column
				align="right"
				label="交强险占比">
				<template slot-scope="scope">
					<div class="row1">{{scope.row.type1.c1}}</div>
					<div class="row2">{{scope.row.type2.c1}}</div>
					<div class="row3">{{scope.row.type3.c1}}</div>
            	</template>
			</el-table-column>
			<el-table-column
				align="right"
				label="商业险单量">
				<template slot-scope="scope">
					<div class="row1">{{scope.row.type1.d1}}</div>
					<div class="row2">{{scope.row.type2.d1}}</div>
					<div class="row3">{{scope.row.type3.d1}}</div>
            	</template>
			</el-table-column>
			<el-table-column
				align="right"
				label="商业险占比">
				<template slot-scope="scope">
					<div class="row1">{{scope.row.type1.e1}}</div>
					<div class="row2">{{scope.row.type2.e1}}</div>
					<div class="row3">{{scope.row.type3.e1}}</div>
            	</template>
			</el-table-column>
			</el-table-column>
		</el-table>
	  </div>
    </div>
  </div>
</template>
<script>
import ztreeSelect from "@/components/z-select/index.vue";
export default {
  components: {
    ztreeSelect
  },
  filters: {
    keepTwoNum: function(val) {
      val = Number(val);
      return val.toFixed(2);
    },
    format: function(val) {
      val = val.replace("年", "y");
      val = val.replace("月", "m");
      return val;
    }
  },
  data() {
    return {
      time1: "",
      insuranceId: "",
      companies: [],
      treeData: [],
      staffAccount: "",
      sAccount: [],
      //数组子级相关参数
      childprops: {
        name: "displayName", //显示名字
        children: "organizationUnits", //子级字段名
        lv: "level" //当前层级
      },
      organizationUnitId: "",
      type1: "0",
      Insurance: [],
      loading: false,
      tableData: [
        {
          insuranceName: "23423bnbbb",
          type1: {
            a: "34",
            b: "34",
            c: "34%",
            d: "34",
            e: "32%",
            a1: "34",
            b1: "34",
            c1: "34%",
            d1: "34",
            e1: "32%"
          },
          type2: {
            a: "34",
            b: "34",
            c: "34%",
            d: "34",
            e: "32%",
            a1: "34",
            b1: "34",
            c1: "34%",
            d1: "34",
            e1: "32%"
          },
          type3: {
            a: "34",
            b: "34",
            c: "34%",
            d: "34",
            e: "32%",
            a1: "34",
            b1: "34",
            c1: "34%",
            d1: "34",
            e1: "32%"
          }
        },
        {
          insuranceName: "34jniji",
          type1: {
            a: "64",
            b: "5",
            c: "2%",
            d: "4",
            e: "2%",
            a1: "44",
            b1: "23",
            c1: "22%",
            d1: "13",
            e1: "32%"
          },
          type2: {
            a: "34",
            b: "34",
            c: "34%",
            d: "34",
            e: "32%",
            a1: "34",
            b1: "34",
            c1: "34%",
            d1: "34",
            e1: "32%"
          },
          type3: {
            a: "34",
            b: "34",
            c: "34%",
            d: "34",
            e: "32%",
            a1: "34",
            b1: "34",
            c1: "34%",
            d1: "34",
            e1: "32%"
          }
        }
      ]
    };
  },
  mounted() {
    this.getCompanies();
    this.getUnits();
    if (this.$route.query.startDay || this.$route.query.endDay) {
      this.time1 = [this.$route.query.startDay, this.$route.query.endDay];
      if (this.$route.query.organizationId) {
        this.organizationUnitId = Number(this.$route.query.organizationId);
      }
      if (
        this.$route.query.insuranceId &&
        typeof this.$route.query.insuranceId == "string"
      ) {
        let arr1 = [];
        arr1.push(this.$route.query.insuranceId);
        this.Insurance = arr1;
      } else {
        this.Insurance = this.$route.query.insuranceId;
      }
    } else {
      let years = new Date().getFullYear();
      let months =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      let last = new Date(years, months, 0).getDate();
      let startday = years + "-" + months + "-01";
      let lastday = years + "-" + months + "-" + last;
      this.time1 = [startday, lastday];
      console.log(this.time1);
    }
    this.getFirstData();
  },
  computed: {},
  watch: {
    $route(to, from) {
      if (this.$route.query.startDay || this.$route.query.endDay) {
        this.time1 = [this.$route.query.startDay, this.$route.query.endDay];
        if (this.$route.query.organizationId) {
          this.organizationUnitId = Number(this.$route.query.organizationId);
        }
        if (
          this.$route.query.insuranceId &&
          typeof this.$route.query.insuranceId == "string"
        ) {
          let arr1 = [];
          arr1.push(this.$route.query.insuranceId);
          this.Insurance = arr1;
        } else {
          this.Insurance = this.$route.query.insuranceId;
        }
      } else {
        let years = new Date().getFullYear();
        let months =
          new Date().getMonth() + 1 < 10
            ? "0" + (new Date().getMonth() + 1)
            : new Date().getMonth() + 1;
        let last = new Date(years, months, 0).getDate();
        let startday = years + "-" + months + "-01";
        let lastday = years + "-" + months + "-" + last;
        this.time1 = [startday, lastday];
        console.log(this.time1);
      }
      this.getFirstData();
    }
  },
  created() {},
  methods: {
    getFirstData() {},
    // 格式化
    formatDate(time, mon) {
      var date = new Date(time);
      var year = date.getFullYear() - mon,
        month = date.getMonth() + 1, //月份是从0开始的
        day = date.getDate(),
        hour = date.getHours(),
        min = date.getMinutes(),
        sec = date.getSeconds();
      var newTime =
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (min < 10 ? "0" + min : min) +
        ":" +
        (sec < 10 ? "0" + sec : sec);
      return newTime;
    },
    // 公司
    getCompanies() {
      let that = this;
      // let all = {
      //   letter: "",
      //   insurances: [{ insuranceName: "全部保险公司", id: "" }]
      // };
      let params = {};
      this.post(params, "services/app/common/GetGroupInsurances").then(rs => {
        console.log(rs);
        if (rs.success) {
          let result = rs.result.items;
          // result.unshift(all);
          that.companies = result;
        }
      });
    },
    // 机构
    getUnits() {
      let params = {};
      let all = {
        organizationName: "全部所属机构",
        organizationId: ""
      };
      this.post(params, "services/app/common/ChildOrganizations").then(rs => {
        console.log(rs);
        if (rs.success) {
          rs.result.unshift(all);
          this.treeData = rs.result;
        }
      });
    },
    // 搜索
    toSearch() {
      if (this.time1.length != 0) {
        this.$router.push({
          name: "newOldCar",
          query: {
            startday: this.time1[0],
            endDay: this.time1[1],
            organizationId: this.organizationUnitId,
            insuranceId: this.Insurance,
            time: new Date().getTime()
          }
        });
      } else {
        this.$message.error("请输入出单时间");
      }
    }
    // 合并
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    // 	if (columnIndex === 0) {
    // 		if (rowIndex % 3 === 0) {
    // 			return {
    // 				rowspan: 3,
    // 				colspan: 1
    // 			};
    // 		} else {
    // 			return {
    // 				rowspan: 0,
    // 				colspan: 0
    // 			};
    // 		}
    // 	}
    // }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss"  scoped>
.wd60 {
  width: 60px;
}
.wd70 {
  width: 70px;
}
.wd90 {
  width: 90px;
}
.wd93 {
  width: 93px;
}
.wd130 {
  width: 130px;
}
.wid {
  width: 150px;
}
.wid1 {
  width: 160px;
}
.wd230 {
  width: 230px;
}
.app-box {
  color: #333;
  .day-top {
    margin-bottom: 20px;
    color: #666;
    .top {
      float: left;
      width: 300px;
      margin-right: 20px;
    }
    .top_1 {
      width: 32%;
    }
    .top1 {
      float: left;
      width: 220px;
      margin-right: 20px;
      margin-bottom: 10px;
    }
    .top2 {
      float: left;
      width: 180px;
      margin-right: 20px;
      margin-bottom: 10px;
    }
    .day-dropdown {
      float: right;
    }
  }
}
.top3 {
  width: 60px;
  float: left;
}
.row1,
.row2,
.row3 {
  height: 40px;
  line-height: 40px;
  padding: 0 15px;
}
.row2 {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
</style>